<template>
	<view class="_calendar_month">
		<view class="u-flex u-flex-items-center u-flex-between">
			<view class="f-s-20 f-w-b">{{ year }}年{{ currentMonthName }}</view>
			<view class="u-flex u-flex-items-center">
				<up-icon name="arrow-left" color="#333" :size="18" @click="prev"></up-icon>
				<view class="u-m-l-24">
					<up-icon name="arrow-right" color="#333" :size="18" @click="next"></up-icon>
				</view>
			</view>
		</view>
		<view class="week-day">
			<view v-for="_week in week" :key="_week" class="_week f-s-12 u-info">{{ _week }}</view>
		</view>
		<view class="date-box">
			<view v-for="date in weekDate" :key="date.date" @click="dateClick(date)"
				:class="['_date', { 'today': date.isToday },{'active': date.date === time && !date.isToday}]">
				{{ date.number }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	// emit
	const emit = defineEmits(['current-date']);

	const time = ref('0')
	const currentDate = ref(new Date());
	const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
	const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];
	const year = computed(() => currentDate.value.getFullYear());
	const month = computed(() => currentDate.value.getMonth());
	const currentMonthName = computed(() => {
	    const monthIndex = currentDate.value.getMonth(); // 获取当前月份的索引
	    return monthNames[monthIndex]; // 返回对应的阿拉伯数字月份名称
	});

	const weekDate = computed(() => {
		const dateArray = [];
		const firstDay = new Date(year.value, month.value, 1);
		const lastDay = new Date(year.value, month.value + 1, 0);
		const start = firstDay.getDay();
		const end = lastDay.getDate();
		for (let i = 0; i < start; i++) {
			dateArray.push({
				date: ''
			});
		}
		for (let i = 1; i <= end; i++) {
			const date = new Date(year.value, month.value, i);
			dateArray.push({
				number: i,
				date: uni.$u.timeFormat(date, 'yyyy-mm-dd'),
				isToday: date.toDateString() === new Date().toDateString()
			});
		}
		return dateArray;
	});

	const prev = () => {
		currentDate.value = new Date(year.value, month.value - 1, 1);
	};

	const next = () => {
		currentDate.value = new Date(year.value, month.value + 1, 1);
	};

	const dateClick = (date) => {
		time.value = date.date
		emit('current-date', date);
	};
</script>

<style lang="scss" scoped>
	._calendar_month {
		padding: 16px;

		.week-day {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			margin-top: 20px;
			gap: 10px;

			._week {
				text-align: center;
			}
		}

		.date-box {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 10px;
			margin-top: 20px;

			._date {
				text-align: center;
				padding: 10px;
				border-radius: 50%;
				border: 1rpx solid #fff;
				position: relative;

				&.today {
					border: 1rpx solid #42b983;
					background-color: #42b983;
					color: #fff;
				}

				&.active {
					border: 1rpx solid #42b983;
					color: #42b983;
				}

				// &::after {
				// 	content: '';
				// 	position: absolute;
				// 	top: 3px;
				// 	right: 3px;
				// 	width: 5px;
				// 	height: 5px;
				// 	background-color: #42b983;
				// 	border-radius: 50%;
				// }
			}
		}

	}
</style>